<template>
	<!-- 发现-推荐歌单 -->
	<view>
		<text>推荐歌单</text>
		<scroll-view scroll-x="true">
			<view class="songList" >
				<view class="songImageText" v-for="(item,index) in songListData" :key='index' @click="goSongList(item.id)">
					<view class="songeImage">
						<image :src="item.picUrl" mode="widthFix"></image>
					</view>
					<view class="songeText">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props:{
			songListData:Array
		},
		data(){ 
			return {
			title:'推荐歌单'
		}},
		methods:{
			goSongList(id){
				uni.navigateTo({
					url:'/pages/find/pages/topSongList/topSongList?id=' + id +'&title=' + this.title,
				})
			}
		}
	}
</script>

<style scoped>
	.songList{
		display: flex;
	}
.songImageText{
	margin: 15upx;
	font-size: 25upx;
}
	.songeImage image{
		height: 210upx;
		width: 210upx;
		border-radius: 10upx;
	}
</style>
